<template>
  <view class="add-settings">
    <view class="add-settings-container">
      <view
        class="add-settings-item"
        @click="addUser"
      >
        <view class="add-settings-item-left">
          <text>人员选择</text>
        </view>
        <view class="add-settings-item-right1">
          <view
            v-if="selectedUsers.length > 0"
            class="item-right-img"
          >
            <img
              :src="selectedUsers[0].avatarUrls"
              alt=""
            />
          </view>
          <text v-else>未设置</text>
          <i class="iconfont icon-youjiantou1"></i>
        </view>
      </view>
      <view
        class="add-settings-item"
        @click="gotoPage"
      >
        <view class="add-settings-item-left">
          <text>权限选择</text>
        </view>
        <view class="add-settings-item-right2">
          <text v-if="selectDeptNames.length > 0">{{ selectDeptNames.join(",") }}</text>
          <text v-else>未设置</text>
          <i class="iconfont icon-youjiantou1"></i>
        </view>
      </view>
      <view class="add-btn">
        <nut-button
          type="primary"
          size="large"
          color="#1E74FD"
          @click="addUserSubmit"
          >确定</nut-button
        >
      </view>
    </view>
    <addUserPopup
      :isUserPopup="isUserPopup"
      @update:visible="updateVisible"
      @selectedUsers="handleSelectedUsers"
      :feedbackUsers="feedbackUsers"
      :disabledList="disabledList"
      :isSingle="true"
    />
  </view>
</template>

<script setup lang="ts">
import Taro, { useDidShow } from "@tarojs/taro";
import addUserPopup from "@/components/addUserPopup/index.vue";
import { addTaskPermission } from "@/api/index";
import { onActivated, onMounted, ref, watch } from "vue";
import { userInfoStore } from "@/stores/userInfoStore";
const store = userInfoStore();
const isUserPopup = ref(false); // 是否显示用户弹窗
const feedbackUsers = ref([]); // 反馈数据
const selectedUsers = ref([]); // 已选数据
const disabledList = ref([]); // 禁用数据
const deptIds = ref([]);
const selectDeptIds = ref([]);
const selectDeptNames = ref([]);
onMounted(() => {
  selectDeptIds.value = [];
  selectDeptNames.value = [];
  store.selectDeptIds = [];
});
useDidShow(() => {
  selectDeptIds.value = [];
  selectDeptNames.value = [];
  let storeSelectDeptIds = JSON.parse(JSON.stringify(store.selectDeptIds));
  storeSelectDeptIds.forEach((item: any) => {
    selectDeptIds.value.push(item.deptId);
    selectDeptNames.value.push(item.deptName);
  });
});
const updateVisible = (val: boolean) => {
  isUserPopup.value = val;
};
const handleSelectedUsers = (val: any) => {
  selectedUsers.value = val;
};
const addUserSubmit = () => {
  if (selectedUsers.value.length == 0) {
    Taro.showToast({
      title: "请选择人员",
      icon: "none",
    });
    return;
  }
  if (selectDeptIds.value.length == 0) {
    Taro.showToast({
      title: "请选择权限",
      icon: "none",
    });
    return;
  }
  let params = {
    userId: selectedUsers.value[0].userId,
    deptIds: selectDeptIds.value.join(","),
  };
  addTaskPermission(params).then(res => {
    Taro.showToast({
      title: "添加成功",
      icon: "none",
    });
    Taro.navigateBack();
  });
};
const addUser = () => {
  isUserPopup.value = true;
};
const gotoPage = () => {
  Taro.navigateTo({
    url: "/packageA/pages/kanbanSettings/staffSelect/index?ids=" + JSON.stringify(selectDeptIds.value),
  });
};
</script>

<style lang="less">
@import url("./index.less");
</style>
